<template>
  <h2>World</h2>
</template>

<script>
import { h } from "vue";

export default {
  setup(props, context) {
    // context.expose  Vue3 新增的，用于控制组件对面的暴露
    console.log("World context.expose", context.expose);
  },

  // setup(props, context) {
  //   // context.emit 就是 this.$emit 用于触发自定义事件
  //   console.log("World context.emit", context.emit);

  //   function handleClick() {
  //     // 触发自定义事件
  //     context.emit("change");
  //   }

  //   return {
  //     handleClick,
  //   };
  // },

  // setup(props, context) {
  //   // console.log("World context", context);
  //   // context.attrs 非props特性
  //   // console.log("World context.attrs", context.attrs);
  //   // context.slots
  //   console.log("World context.slots", context.slots);
  //   // setup 函数配合渲染函数render
  //   //    返回一个函数，该函数就是 渲染函数
  //   return () => {
  //     // 返回虚拟DOM对象
  //     return h(
  //       "div",
  //       {
  //         class: "box",
  //         id: "box1",
  //         style: {
  //           width: "100px",
  //           height: "100px",
  //           background: "red",
  //         },
  //       },
  //       [
  //         context.slots.default({ a: 1, b: 2 }),
  //         h("h2", "world"),
  //         h("p", "pppp"),
  //         context.slots.top(),
  //       ]
  //     );
  //   };
  // },
};
</script>
